<template>
  <div>
    <div ref="markdownDomRef"></div>
    <div>
      <n-gradient-text style="margin-top: 15px" size="18" type="info">
        <span style="margin-right: 10px">Vditor:</span>
        <a href="https://b3log.org/vditor/" target="_blank" style="font-size: 14px">https://b3log.org/vditor/</a>
      </n-gradient-text>
    </div>
  </div>
</template>

<script setup lang="ts">
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import {designConfig} from "@/store";
import {onMounted, ref, watch} from "vue";
import {THEME} from "@/enums/design_enum";

const emit = defineEmits(['after', 'input', 'blur', 'select'])

const theme = designConfig();

const markdownEditor = ref<Vditor | null>(null);
const markdownDomRef = ref<HTMLElement | null>(null);

function renderMarkdown() {
  markdownEditor.value = new Vditor(markdownDomRef.value!, {
    minHeight: 600,
    theme: theme.darkTheme ? THEME.DARK : 'classic',
    icon: 'material',
    cache: {
      enable: false
    },
    typewriterMode: true,
    after () {
      emit('after')
    },
    input(context: string) {
      emit("input", context);
    },
    blur(context: string) {
      emit("blur", context);
    },
    select(context: string) {
      emit("select", context);
    },
  })
}

watch(
    () => theme.darkTheme,
    newValue => {
      const themeMode = newValue ? 'dark' : 'classic';
      markdownEditor.value?.setTheme(themeMode);
    }
)

onMounted(() => {
  renderMarkdown();
})

</script>

<script lang="ts">
export default {
  name: "Markdown"
}
</script>

<style scoped>

</style>